<template>
  <div class="container">
    <base-title base-title="文章列表" />
    <!-- 表格区域 -->
    <base-table
      :structure="articleListSc"
      :data="articleListData"
      :total="articleListTotal"
      :form-options="articleSearchForm"
      btn-items="search,reset,export"
      @on-search="onSearch"
      @on-reset="onReset"
      @switchChange="switchChange"
      @currentPageChange="handleCurrentPageChange"
    >
      <template #operation="{ scope }">
        <el-button style="padding: 5px" type="success" :icon="Edit" text @click="editArticle(scope.row.id)">编辑</el-button>
        <el-button style="padding: 5px" type="danger" :icon="Delete" text @click="deleteArticle(scope.row.id)">删除</el-button>
      </template>
    </base-table>
  </div>
</template>

<script setup lang="ts" name="articleList">
  import { ref, onBeforeMount, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import {
    queryArticleListRequest,
    updateStickRequest,
    updateRecommendRequest,
    deleteArticleRequest,
    searchArticleRequest,
  } from '@/network/api/article-api'
  import { getAllTypesRequest } from '@/network/api/type-api'
  import baseTable from '@/components/base-table/baseTable.vue'
  import { Delete, Edit } from '@element-plus/icons-vue'
  import { ElMessageBox } from 'element-plus'
  import notification from '@/utils/notification'
  import formatUtcTime from '@/utils/formatTime'
  import { articleListSc, articleSearchForm } from '@/components/base-table/config'
  const router = useRouter()
  const articleListData = ref([]) // 文章列表数据
  const articleListTotal = ref<number>(0) // 文章总数量
  const hasSearchParam = ref(false) // 搜索状态
  let searchInfo = reactive({}) // 搜索字段记录
  let types = ref([]) // 所有类型
  const articleListPageInit = async (currentPage: number = 1) => {
    const result = await queryArticleListRequest(currentPage)
    articleListData.value = result.result.data
    articleListTotal.value = result.result.total.count
    articleListData.value.forEach((item: any) => {
      item.createAt = formatUtcTime(item.createAt)
      item.is_recommend = item.is_recommend === 0 ? false : true
      item.is_sticky = item.is_sticky === 0 ? false : true
    })
  }
  // 搜索事件处理
  const onSearch = async (formData: any) => {
    hasSearchParam.value = true
    searchInfo = formData
    const result = await searchArticleRequest(formData)
    articleListData.value = result.result.data
    articleListTotal.value = result.result.total.count
    articleListData.value.forEach((item: any) => {
      item.createAt = formatUtcTime(item.createAt)
      item.is_recommend = item.is_recommend === 0 ? false : true
      item.is_sticky = item.is_sticky === 0 ? false : true
    })
  }
  // 重置事件处理
  const onReset = async () => {
    hasSearchParam.value = false
    searchInfo = {}
    await articleListPageInit()
  }
  // 获取所有类型，并赋值给搜索表单数据
  const getAllLabelTypes = async () => {
    const typeResult = await getAllTypesRequest()
    types.value = typeResult.result
    articleSearchForm.forEach(item => {
      if (item.prop === 'article_type') {
        item.options = types.value.map(({ id, type_name: label }) => ({ label, value: id })) as any
      }
    })
  }
  onBeforeMount(async () => {
    await getAllLabelTypes()
    await articleListPageInit()
  })
  const editArticle = (id: number) => {
    router.push(`/home/article_edit/${id}`)
  }
  const deleteArticle = async (id: number) => {
    const reslt = await ElMessageBox.confirm('确定删除吗？', 'Warning', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).catch(err => err)
    if (reslt === 'cancel') {
      return notification.info('再想想~')
    } else if (reslt === 'confirm') {
      const result = await deleteArticleRequest(id)
      notification.success(result.msg)
      await articleListPageInit()
    }
  }
  const switchChange = async (row: any, prop: string) => {
    if (prop === 'is_recommend') {
      const result = await updateRecommendRequest(row.id, row.is_recommend)
      notification.success(result.msg)
    } else {
      const result = await updateStickRequest(row.id, row.is_sticky)
      notification.success(result.msg)
    }
  }
  // 页码改变事件处理
  const handleCurrentPageChange = async (value: number) => {
    if (hasSearchParam.value) {
      const result = await searchArticleRequest(searchInfo, value)
      articleListData.value = result.result.data
      articleListTotal.value = result.result.total.count
      articleListData.value.forEach((item: any) => {
        item.createAt = formatUtcTime(item.createAt)
        item.is_recommend = item.is_recommend === 0 ? false : true
        item.is_sticky = item.is_sticky === 0 ? false : true
      })
    } else {
      await articleListPageInit(value)
    }
  }
</script>

<style lang="less" scoped>
  .table {
    font-size: 16px;

    .table-td-thumb {
      display: block;
      margin: auto;
      width: 100%;
      height: 100%;
    }

    .edit {
      color: skyblue;
    }

    .delete {
      color: red;
    }
  }
</style>
